<template>
  <div :class="$style.details">
    <Button @click="visible = true">查看</Button>
    <el-dialog
      :visible.sync="visible"
      destroy-on-close
      :close-on-click-modal="false"
      title="查看详情"
      :append-to-body="true"
      @open="openHandle"
      @close="resetHandle"
    >
      <div class="table-list-box">
        <el-table
          v-loading="isLoading"
          border
          height="360"
          highlight-current-row
          header-row-class-name="table-list-header"
          tooltip-effect="dark"
          style="width: 100%"
          :data="dataList"
        >
          <el-table-column prop="postName" label="岗位" align="center" />
          <el-table-column prop="staffName" label="姓名" align="center" width="120" />
          <el-table-column prop="phone" label="联系电话" align="center" width="150" />
        </el-table>
      </div>
      <div class="pagination-container">
        <el-pagination
          :current-page.sync="formData.page"
          :page-sizes="[10, 20, 30, 40, 50, 100]"
          :page-size.sync="formData.rows"
          layout="sizes, prev, pager, next"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getTopInfoStaff } from '@/api/topInfo'
export default {
  name: 'Details',
  components: {},
  props: {
    detailInfo: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      isLoading: false,
      visible: false,
      formData: {
        disId: '',
        disCode: '', // 经销商
        disName: '',
        storeCode: '', // 门店
        postCode: '', // 岗位
        isOnline: '', // 是否在职
        staffName: '', // 员工姓名
        phone: '', // 联系电话
        page: 1,
        rows: 10
      },
      total: 0,
      dataList: []
    }
  },
  mounted() {
  },
  methods: {
    // FIXME:根据query参数获取数据
    getTableData() {
    },
    // 打开表单是执行
    openHandle() {
      this.dataList = []
      if (this.detailInfo.disCode && this.detailInfo.shopCode) {
        this.searchTopStaffInfo()
      }
    },
    searchTopStaffInfo() {
      const _this = this
      const params = { ..._this.formData }
      params.isOnline = 1
      // 岗位编码 08,09
      params.postCode = '08,09'
      params.disCode = this.detailInfo.disCode // K1001749
      params.storeCode = this.detailInfo.shopCode // K100174903
      Object.keys(params).forEach(key => {
        if (params[key] === '') delete params[key]
      })
      delete params.disId
      delete params.disName
      _this.isLoading = true
      getTopInfoStaff(params).then(res => {
        if (res.success === 1) {
          _this.formData.page = res.data.page
          _this.total = res.data.total
          _this.dataList = res.data.records
          _this.isLoading = false
        } else {
          _this.formData.page = 1
          _this.total = 0
          _this.dataList = []
          _this.isLoading = false
        }
      }, () => { _this.isLoading = false })
    },
    /**
     * 选择每页多少条
     */
    handleSizeChange(pageSize) {
      this.$set(this.formData, 'page', 1)
      this.$set(this.formData, 'rows', pageSize)
      this.$nextTick(() => {
        this.searchTopStaffInfo()
      })
    },
    /**
     * 分页
     */
    handleCurrentChange(currrentPage) {
      this.$set(this.formData, 'page', currrentPage)
      this.$nextTick(() => {
        this.searchTopStaffInfo()
      })
    },
    // 重置
    resetHandle() {
      this.dataList = []
      this.formData.page = 1
      this.formData.rows = 10
      this.total = 0
    }
  }
}
</script>
<style lang='scss' module>
.details {
  display: inline-block;
  & .content {
    padding: 0;
    & .content-wrap {
      padding: 0 !important;
    }
  }
}
</style>
